<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import router from "@/router/index.js";
import {useUserStore} from "@/stores/user.js";
import {computed} from 'vue'

const userStore=useUserStore()

const OrderCount=computed(()=>{
  let count=0
  userStore.orderList.forEach((item,index)=>{
    if(item.status===0){
      count++
    }
  })
  return count
})

const cartCount=computed(()=>{
  let count=0
  userStore.cart.forEach((shop)=>{
    shop.goods.forEach((goods)=>{
      count++
    })
  })
  return count
})

const favoriteCount=computed(()=>{
  return userStore.favorites.length
})

const avatars={
  noLogin:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  userAvatar:userStore.isLogin?useUserStore().getAvatar:''
}

</script>


<template>

  <el-card class="home-info-box">

    <div class="header">
      <el-badge :value="userStore.userInfo.role==='expert'?'专家认证':''" :offset="[-48, 55]">
        <el-avatar :src="userStore.isLogin?avatars.userAvatar:avatars.noLogin" :size="'large'"/>
      </el-badge>

      <span
          style="font-size: 16px;
          color: #444444;
          margin-left: 18px;">
        {{userStore.isLogin?`Hi,${userStore.userInfo.username}`:'Hi,请登录'}}
      </span>
      <br><br>

      <template v-if="userStore.isLogin">
        <el-button class="loginBtn" @click="router.push('/userCenter')">个人中心</el-button>
      </template>
      <template v-else>
        <el-button class="loginBtn" @click="router.push('/login')" >快捷登录/注册</el-button>
      </template>


    </div>


    <div class="center">
      <el-row :gutter="50">
        <el-col span="12" @click="router.push('userCenter/order')">
          <el-badge :value="OrderCount" :show-zero="false">
            <el-icon size="30"><Tickets /></el-icon><br>
          </el-badge>
          <br>
          我的订单
        </el-col  >
        <el-col span="12" @click="router.push('userCenter/favorites')">
          <el-badge :value="favoriteCount" :show-zero="false">
            <el-icon size="30"><Star /></el-icon><br>
          </el-badge>
          <br>
          收藏夹
        </el-col>
      </el-row>
      <el-row :gutter="50">
        <el-col span="12" style="margin-left: 6px" @click="router.push('userCenter/cart')">
          <el-badge :value="cartCount" :show-zero="false">
          <el-icon size="30"><ShoppingCart /></el-icon><br>
            </el-badge>
          <br>
          购物车
        </el-col>
        <el-col span="12" @click="router.push('expert/detail/148')">
          <el-icon size="30"><Message /></el-icon><br>
          专家咨询
        </el-col>
      </el-row>
    </div>

    <div class="footer">
        <el-button class="openBtn" v-if="userStore.isLogin&&userStore.myShop" @click="router.push('/myShop')">
          管理店铺</el-button>
        <el-button class="openBtn" v-else  @click="router.push('/userCenter/open')">
          免费开店卖货</el-button>
    </div>
  </el-card>
</template>

<style scoped lang="less">
.home-info-box {
  font-family: Arial, sans-serif;
  margin: 20px 0 20px 20px;
  width: 270px;
  height: 400px;
  //background-color: white;
  background: linear-gradient(rgba(176, 244, 183, 0.75), 10%,white);
  border-radius: 5px;
  padding: 0 0 0 0;
}

.header{
  width:100%;
  height: 150px;
  text-align: center;

}

.loginBtn{
  background-color: #39bf3e;
  color:white;
  width: 80%;
  height: 40px;
  font-size: 16px;
  display: block;
  margin: 0 auto;
}

.center{
  width: 100%;
  height: 160px;
  display: inline-grid;
  justify-content: center;
  text-align: center;
}
.el-col:hover{
  color: #1fe343;
  cursor: pointer; //光标变成手
}

.openBtn{
  background-color: rgba(255, 134, 44, .1);
  border-color: #ff862c;
  color:#ff862c;
  width: 90%;
  height: 40px;
  font-size: 16px;
  display: block;
  margin: 0 auto;
}
.openBtn:hover{
  background-color: #ff862c;
  color: white;
}
</style>
